import React from 'react';
import Platforms from './platform';
import Trackline from './trackline';
import InteractiveGridLayer from './InteractiveGridLayer';
import GridLines from './GridLines';
import Tracklights from './Tracklights';
import TrainOverlay from './TrainOverlay';

const TracklineVisual = ({
    rows,
    columns,
    cellSize,
    gap,
    lines,
    onLineDrawn,
    platformsState,
    updatePlatformsState,
    editMode,
    tracklights,
    updateTracklight,
    updateLine,
    deleteTracklight,
    deletePlatform,
    deleteLine,
    deleteMode,
    drawPlatformMode,
    setDrawPlatformMode,
    editTracklightMode,
    setTracklights,
    setLines,
    svgRef,
    trains,
    signals
}) => {
    const padding = 30;
    const width = columns * (cellSize + gap) + padding;
    const height = rows * (cellSize + gap) + padding;

    return (
        <div
            style={{
                overflowX: 'auto',
                overflowY: 'auto',
                width: '100%',
                maxHeight: '92vh', // 可视高度的 92%
            }}
        >
            <svg
                ref={svgRef}
                width={width}
                height={height}
                style={{ border: '1px solid #ccc', backgroundColor: '#f9f9f9' }}
            >
                <g transform={`translate(${padding}, ${padding})`}>
                    {/* 网格线层（最底层） */}
                    <GridLines
                        rows={rows}
                        columns={columns}
                        cellSize={cellSize}
                        gap={gap}
                    />
                    {/* 站台层 */}
                    <Platforms
                        platformsState={platformsState}
                        cellSize={cellSize}
                        gap={gap}
                        updatePlatformsState={updatePlatformsState}
                        deleteMode={deleteMode}
                        deletePlatform={deletePlatform}
                        drawPlatformMode={drawPlatformMode}
                        setDrawPlatformMode={setDrawPlatformMode}
                    />
                    {/* 线路层 */}
                    <Trackline
                        rows={rows}
                        columns={columns}
                        cellSize={cellSize}
                        gap={gap}
                        lines={lines}
                        onLineDrawn={onLineDrawn}
                        updateLine={updateLine}
                        deleteLine={deleteLine}
                        deleteMode={deleteMode}
                    />
                    {/* 信号机层 */}
                    <Tracklights
                        tracklights={tracklights}
                        cellSize={cellSize}
                        gap={gap}
                        updateTracklight={updateTracklight}
                        deleteMode={deleteMode}
                        deleteTracklight={deleteTracklight}
                        editTracklightMode={editTracklightMode}
                        setTracklights={setTracklights}
                    />
                    {/* 车辆层 */}
                    <TrainOverlay
                        trains={trains}
                        signals={signals}
                        lines={lines}
                        cellSize={cellSize}
                        gap={gap}
                        setLines={setLines}
                        setTracklights={setTracklights}
                    />
                    {/* 交互层 */}
                    {editMode && (
                        <InteractiveGridLayer
                            rows={rows}
                            columns={columns}
                            cellSize={cellSize}
                            gap={gap}
                            onLineDrawn={onLineDrawn}
                        />
                    )}
                </g>
            </svg>
        </div>
    );
};

export default TracklineVisual;
